'use client'
import { useForm } from 'react-hook-form'
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from 'zod'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

const formSchema = z.object({
  username: z.string().min(2, {
    message: "姓名不能少于2位数",
  }).regex(/^(?:[\u4e00-\u9fa5]+)(?:·[\u4e00-\u9fa5]+)*$|^[a-zA-Z0-9]+\s?[\.·\-()a-zA-Z]*[a-zA-Z]+$/, {
    message: '姓名格式不正确',
  }),
  phone: z.string().min(1, {
    message: '电话不能为空'
  }).regex(/^(1[3-9]\d{9}|0\d{2,3}-?\d{7,8})$/, {
    message: '请输入有效的电话号码'
  }),
  compnay: z.string().min(1, {
    message: '公司名称不能为空'
  }),
  position: z.string().min(1, {
    message: '职位不能为空'
  }),
  email: z.string().min(1, {
    message: '邮箱不能为空'
  }).regex(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, {
    message: '请输入有效的邮箱地址'
  }),
  content: z.string().min(1, {
    message: '内容不能为空'
  }),
})

const ContactForm = () => {

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    mode: 'all',
    defaultValues: {
      username: "",
      phone: '',
      compnay: '',
      position: '',
      email: '',
      content: ''
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <div className='flex items-center space-x-[26px]'>
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem className='flex-1 md:flex-auto'>
                <FormLabel></FormLabel>
                <FormControl>
                  <Input placeholder="您的姓名*" {...field} className='w-full md:w-[453px] bg-[#F7F6F5] border border-[#D0D0D0] hover:border-[#afafaf] focus:border-transparent rounded-sm transition-colors placeholder:text-sm md:placeholder:text-[18px] text-base md:text-[22px] px-[10px] md:px-[17px] py-[10px] md:py-[30px] placeholder:text-[#999]' />
                </FormControl>
                <div className='h-[20px]'><FormMessage /></div>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="phone"
            render={({ field }) => (
              <FormItem className='flex-1 md:flex-auto'>
                <FormLabel></FormLabel>
                <FormControl>
                  <Input placeholder="电话*" {...field} className='w-full md:w-[453px] bg-[#F7F6F5] border border-[#D0D0D0] hover:border-[#afafaf] focus:border-transparent rounded-sm transition-colors placeholder:text-sm md:placeholder:text-[18px] text-base md:text-[22px] px-[10px] md:px-[17px] py-[10px] md:py-[30px] placeholder:text-[#999]' />
                </FormControl>
                <div className='h-[20px]'><FormMessage /></div>
              </FormItem>
            )}
          />
        </div>
        <FormField
          control={form.control}
          name="compnay"
          render={({ field }) => (
            <FormItem className='mb-[20px]'>
              <FormLabel></FormLabel>
              <FormControl>
                <Input placeholder="公司名称*" {...field} className='bg-[#F7F6F5] border border-[#D0D0D0] hover:border-[#afafaf] focus:border-transparent rounded-sm transition-colors placeholder:text-sm md:placeholder:text-[18px] text-base md:text-[22px] px-[10px] md:px-[17px] py-[10px] md:py-[30px] placeholder:text-[#999]' />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="position"
          render={({ field }) => (
            <FormItem className='mb-[20px]'>
              <FormLabel></FormLabel>
              <FormControl>
                <Input placeholder="职位" {...field} className='bg-[#F7F6F5] border border-[#D0D0D0] hover:border-[#afafaf] focus:border-transparent rounded-sm transition-colors placeholder:text-sm md:placeholder:text-[18px] text-base md:text-[22px] px-[10px] md:px-[17px] py-[10px] md:py-[30px] placeholder:text-[#999]' />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem className='mb-[20px]'>
              <FormLabel></FormLabel>
              <FormControl>
                <Input placeholder="邮箱" {...field} className='bg-[#F7F6F5] border border-[#D0D0D0] hover:border-[#afafaf] focus:border-transparent rounded-sm transition-colors placeholder:text-sm md:placeholder:text-[18px] text-base md:text-[22px] px-[10px] md:px-[17px] py-[10px] md:py-[30px] placeholder:text-[#999]' />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="content"
          render={({ field }) => (
            <FormItem className='mb-[20px]'>
              <FormLabel></FormLabel>
              <FormControl>
                <Textarea placeholder="内容" {...field} className='bg-[#F7F6F5] border border-[#D0D0D0] hover:border-[#afafaf] focus:border-transparent rounded-sm transition-colors placeholder:text-sm md:placeholder:text-[18px] text-base md:text-[22px] px-[10px] md:px-[17px] py-[10px] md:py-[30px] placeholder:text-[#999]' />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <div className='flex items-center space-x-[10px] md:space-x-[44px] mt-[38px]'>
          <button className='flex-1 bg-gradient-to-b from-[#80D0FF] to-[#0B67E5] text-white text-sm md:text-[18px] w-[130px] md:w-[170px] h-[35px] md:h-[55px] rounded-lg md:rounded-l-[28px] md:rounded-br-[28px] flex items-center justify-center' type='submit'>提交</button>
          <button className='flex-1 bg-white text-black/70 text-[18px] w-[130px] md:w-[170px] h-[35px] md:h-[55px] rounded-lg md:rounded-l-[28px] md:rounded-br-[28px] flex items-center justify-center' onClick={() => form.reset()}>重置</button>
        </div>
      </form>
    </Form>
  )
}

export default ContactForm